<template>
	<view class="container">
		<view class="avatar">
			<!-- 上传组件 -->
			<u-upload ref="img_logo" name="img_logo" :maxCount="1" :fileList="filelist" width="100" height="100"
				@delete="del" @afterRead="read" />
		</view>

		<view class="secetion">
			<u-form labelPosition="left" labelWidth="60" :model="record" :rules="rules" ref="product">
			
				
				<!-- 名称 -->
				
				<u-form-item label="申请人：" prop="name">
					<u-input v-model="record.employee.nickname" disabled />
				</u-form-item>
				<u-form-item label="单号：" prop="code">
					<u-input v-model="record.code" disabled />
				</u-form-item>
			
				<u-form-item label="状态：" prop="name">
					<u-input v-model="record.status_text"  disabled />
				</u-form-item>
			
			
				<u-form-item label="金额："  prop="amount">
					<u-input v-model="record.amount" disabled />
				</u-form-item>

				<u-form-item label="申请时间"  prop="amount">
					<u-input v-model="record.createtime_text" disabled />
				</u-form-item>
			
				<!-- 品牌描述 -->
				<u-form-item label="描述：" prop="content" borderBottom>
					<u-textarea placeholder="不低于3个字" disabled v-model="record.content" count></u-textarea>
				</u-form-item>

				
				<!-- 提交按钮 -->
				<u-button text="确定发放" icon="pushpin" size="small" type="success"  @click="fafang" />
			</u-form>

		</view>

		 <!-- 模态框 -->
		 <u-modal :show="show" :content="content" showCancelButton @confirm="confirm" @cancel="cancel" />
		<!-- 消息提醒 -->
		<u-toast ref="notice"></u-toast>
	</view>
</template>
  
<script>
export default {
	onLoad(options) {

		this.comissid = options.comissid ? options.comissid : 0,
		
		this.auth = this.$u.auth.check();

		this.recordinfo()

	
	},

	onReady() {

		this.$refs.product.setRules(this.rules)


	},
	created() {

		this.timer = setInterval(() => {

			let a = this.$u.count.check()

		}, 15000);

	},
	beforeDestroy() {
		clearInterval(this.timer)
	},
	data() {
		return {
			filelist: [],
			auth: {},
			stoid: null,
			img_logo: "",
			piclist:[],
			name: "",
			comissid:0,
			show:false,
			content:"是否确定发放提成",
			record: {
				id:0,
				content:"",
				img_logo:"",
				name:""
			},
			showrecord: false,
			rules: {
				content: {
					required: true,
					message: "不低于3个字",
					trigger: ["change"],
				},
				
				name: {
					required: true,
					message: "请填写商品名称",
					trigger: ["blur", "change"],
				},
				img_logo: {
					required: true,
					message: "请填上传品牌图片",
					trigger: ["blur", "change"],
				},
			
			},

		};
	},

	methods: {
		del(e) {

			let list = this.filelist.map(async (item, index) => {
				// this.filelist(index, 1)

				if (index == e.index) {
					// 删除数组中的某一项

					this.filelist.splice(e.index, index)
					let data = {
						img_logo: e.file.url
					}
					var result = await this.$u.api.product.delrecordthumb(data)

					if (result.code) {
						this.$refs.notice.show({
							type: "success",
							message: result.msg,
							duration: 1000,
							complete: () => {
								// 还剩余一张的时候清空
								if(this.filelist.length==1)
								{
									this.filelist = []
								}
								
						
							}
						});
						return false;
					}




				}



			})

		},
		// 确定发放分佣
		fafang()
		{
			this.show = true
		},
		async read(event) {

			//组装上传数据
			var data = {
				filePath: event.file.thumb,
				name: "product_img",
				header: {},
				
			};

			//调用接口
			var result = await this.$u.api.product.thumbs(data);

			if (result.code) {

				// 合并对象
				this.filelist = this.filelist.concat({ url: result.data })


				//修改本地存储中的图像内容
				// this.img_logo = result.data;

				// 合并对象

				// this.imageslist = []
				//  this.imageslist =  this.imageslist.concat({img_logo:result.data})

				let userArray = Object.entries(this.filelist).map(([key, value]) => {
					return { value };
				})



				userArray.forEach((item) => {
					// 截取想要部分路径
					let str = item.value.url.slice(24, 200)
					// 把想要的路径追加到数组
					this.piclist.push(str)
				})


				// 数组的去重
				let qcarr = [...new Set(this.piclist)]




				// 数组转化成字符串
				this.record.img_logo = qcarr.join(",")

			} else {
				this.$refs.notice.show({
					type: "error",
					message: result.msg,
				});
				return false;
			}
		},
		async recordinfo()
		{
			let data = {
				adminid:this.auth.id,
				comissid:this.comissid,

			}
			let result = await this.$u.api.admin.findtxrecord(data)
			if(result.code)
			{
				this.record = result.data

				if(this.record.employee.avatar_text != "")
				{
					this.filelist = [
					{ url: this.record.employee.avatar_text }
				]
				}
				
				
				
			}
		},
		// 确定发放提成
		async confirm()
		{
			this.show = false

			let data = {
				adminid:this.auth.id,
				comissid:this.comissid,
			}
		},
		// 取消
		cancel()
		{
			this.show = false
		}		
	

	},
};
</script>
  
<style >
.secetion {
	padding: 20px;
}

.container {
	height: 100%;
	margin: 0 50rpx;
	box-sizing: border-box;
}

.u-avatar {
	margin: 80rpx auto 40rpx;
}

.vedio {
	text-align: center;
}

.u-vedio {
	margin: 80rpx auto 40rpx;
}

.xcx {
	width: 200rpx;
	height: 200rpx;
	margin: 80rpx auto 40rpx;
	border-radius: 100%;
	overflow: hidden;
}

.nickname {
	font-size: 14px;
	text-align: center;
}

.title {
	text-align: center;
	margin: 40rpx 0;
	font-size: 14rpx;
}

.avatar .u-upload {
	justify-content: center;
	align-items: center;
	margin: 3em auto;
}

.vedio .u-upload {
	justify-content: center;
	align-items: center;
	margin: 0.3em auto;
}

.u-form-item__body__left__content__label.data-v-5e7216f1 {
	width: 75px;
}

.avatar .u-upload {
	justify-content: center;
	align-items: center;
	margin: 3em auto;
}
</style>
  